<template>
  <div class="filter-con">
    <div class="flex-bt con-control">
      <a href="javascript:" :class="{active: filterSubFilter === 1}" @tap="handleSubFilter(1)">
        <span>智能排序</span>
        <span class="mh-arrow-down"></span>
      </a>
      <a href="javascript:" :class="{active: filterSubFilter === 2}" @tap="handleSubFilter(2)">
        <span>基本筛选</span>
        <span class="mh-arrow-down"></span>
      </a>
      <a href="javascript:" :class="{active: filterSubFilter === 3}" @tap="handleSubFilter(3)">
        <span>高级筛选</span>
        <span class="mh-arrow-down"></span>
      </a>
    </div>
    <div class="filt-con-layer">
      <!--筛选-智能排序-->
      <transition name="slide-fade" mode="out-in">
        <ul class="mui-table-view mui-table-view-radio" v-show="filterSubFilter === 1 && filterConShow">
          <li class="mui-table-view-cell" v-for="item in intelligent" @tap="chooseIntelligent(item.value)">
            <a class="mui-navigate-right">
              {{item.name}}
            </a>
          </li>
        </ul>
      </transition>
      <!--筛选-基本筛选-->
      <transition name="slide-fade" mode="out-in">
        <div v-show="filterSubFilter === 2 && filterConShow">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell" @tap="openCityPicker(1)">
              <a class="mui-navigate-right">居住地</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text="base.living ? base.living : '不限'"></span>
            </li>
            <li class="mui-table-view-cell" @tap="openHeightPicker">
              <a class="mui-navigate-right">身高</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text="base.height ? base.height : '不限'"></span>
            </li>
            <li class="mui-table-view-cell" @tap="openEducatePicker">
              <a class="mui-navigate-right">学历</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text="base.edu ? base.edu : '不限'"></span>
            </li>
            <li class="mui-table-view-cell" @tap="openMarrigePicker">
              <a class="mui-navigate-right">婚姻状况</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text="base.marriage ? base.marriage : '不限'"></span>
            </li>
            <li class="mui-table-view-cell" @tap="openIncomePicker">
              <a class="mui-navigate-right">月收入</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text="base.income ? base.income : '不限'"></span>
            </li>
          </ul>
          <div class="flex-bt btn-row">
            <button type="button" class="mui-btn" @tap='closeFilter'>取消</button>
            <button type="button" class="mui-btn mh-btn" @tap='submit'>确定</button>
          </div>
        </div>
      </transition>
      <!--筛选-高级筛选-->
      <transition name="slide-fade" mode="out-in">
        <div v-show="filterSubFilter === 3 && filterConShow">
          <ul class="mui-table-view">
            <li class="mui-table-view-cell" @tap="selectVal(1)">
              <a class="mui-navigate-right">购房情况</a>
              <span class="mui-badge mui-badge-inverted con-val" v-text='base.house'></span>
            </li>
            <li class="mui-table-view-cell" @tap="selectVal(2)">
              <a class="mui-navigate-right">购车情况</a>
              <span class="mui-badge mui-badge-inverted con-val">{{base.car}}</span>
            </li>
            <li class="mui-table-view-cell" @tap="openCityPicker(2)">
              <a class="mui-navigate-right">户口</a>
              <span class="mui-badge mui-badge-inverted con-val">{{base.hukou}}</span>
            </li>
            <li class="mui-table-view-cell" @tap="openCityPicker(3)">
              <a class="mui-navigate-right">家乡</a>
              <span class="mui-badge mui-badge-inverted con-val">{{base.home}}</span>
            </li>
            <li class="mui-table-view-cell" @tap="selectVal(3)">
              <a class="mui-navigate-right">有无子女</a>
              <span class="mui-badge mui-badge-inverted con-val">{{base.child}}</span>
            </li>
<!--             <li class="mui-table-view-cell" @tap="">
              <a class="mui-navigate-right">星座</a>
              <span class="mui-badge mui-badge-inverted con-val"></span>
            </li> -->
          </ul>
          <div class="flex-bt btn-row">
            <button type="button" class="mui-btn" @tap='closeFilter'>取消</button>
            <button type="button" class="mui-btn mh-btn" @tap='submit'>确定</button>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
  import {cityData} from "@/assets/js/city.data-3";
  export default {
    name: "search-condition",
    data () {
      return {
        filterSubFilter: 0,
        filterConShow: true,
        intelligent: [
          {
            name: '智能排序',
            value: '0'
          },
          {
            name: '最新加入',
            value: '1'
          },
          {
            name: '最近登录',
            value: '2'
          },
          {
            name: '收入排序',
            value: '3'
          }
        ],
        base: {
          living: '',
          age: '',
          height: '',
          marriage: '',
          edu: '',
          income: '',
          home: '',
          house: '',
          car: '',
          hukou: '',
          child: ''
        },
        heightList: [{
          value:'1',
          text:'150cm - 155cm'
        },{
          value:'2',
          text:'155cm - 160cm'
        },{
          value:'3',
          text:'160cm - 165cm'
        }],
        incomeList: [{
          value: '1',
          text: '3000 - 5000'
        },{
          value: '2',
          text: '5000 - 8000'
        },{
          value: '3',
          text: '8000 - 15000'
        }],
        educateList: [{
          value: '1',
          text: '小学'
        },{
          value: '2',
          text: '初中'
        },{
          value: '3',
          text: '高中'
        },{
          value: '4',
          text: '大专'
        },{
          value: '5',
          text: '本科'
        },{
          value: '6',
          text: '硕士'
        },{
          value: '7',
          text: '博士'
        }],
        marriageList: [{
          value:'1',
          text:'未婚'
        },{
          value:'2',
          text:'已婚'
        }],
        valList: [{
          value:'0',
          text:'无'
        },{
          value:'1',
          text:'有'
        }],
        order: '',
        address: '',
        height: '',
        marriage: '',
        income: '',
        car: '',
        house: '',
        registered_residence: '',
        hometown: '',
        children: '',
        zodiac: ''
      }
    },
    mounted () {
      this.$on('closeFilter',() => {
        this.filterConShow = false;
      });
    },
    methods: {
      closeFilter(){
        this.$parent.closeLayer();//调用父组件方法
        this.base = {
          living: '',
          age: '',
          height: '',
          marriage: '',
          edu: '',
          income: '',
          home: '',
          house: '',
          car: '',
          hukou: '',
          child: ''
        };
      },
      getData(){
        console.log(this.base.living)
        this.$parent.getList(this.order, this.base.living, this.base.height, this.base.marriage, this.base.income, this.base.car, this.base.house, this.base.hukou, this.base.home, this.base.child, this.base.edu);
      },
      submit(){
        this.getData()
      },
      handleSubFilter (i) {
        let vip = JSON.parse(window.localStorage.getItem("vip"));
        console.log(vip)
        if(i==3 && vip.is_search==0){
          mui.toast("会员等级不够")
          return false
        }
        this.filterConShow = true;
        this.filterSubFilter = i;
        this.$emit('showLayer', true);
      },
      _getParam (obj, param) {
        return obj[param] || '';
      },
      // 选择居住地
      openCityPicker (type) {
        let _this = this;
        let cityPicker = new mui.PopPicker({
          layer: 3
        });
        cityPicker.setData(cityData);
        cityPicker.show(function(items) {
          let thisName = `${_this._getParam(items[0], 'text')}${_this._getParam(items[1], 'text')}${_this. _getParam(items[2], 'text')}`;
          console.log(thisName)
          if(type==1){
            _this.base.living = thisName;
          }
          else if(type==2){
            _this.base.hukou = thisName;
          }
          else if(type==3){
            _this.base.home = thisName;
          }
        });
      },
      selectVal(type){
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.valList);
        picker.show(function (selectItems) {
          if(type==1){
            _self.base.house = selectItems[0].text;
          }
          else if(type==2){
            _self.base.car = selectItems[0].text;
          }
          else if(type==3){
            _self.base.child = selectItems[0].text;
          }
        })
      },
      // 选择身高
      openHeightPicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.heightList);
        picker.show(function (selectItems) {
          _self.base.height = selectItems[0].text;
        })
      },
      // 选择收入
      openIncomePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.incomeList);
        picker.show(function (selectItems) {
          _self.base.income = selectItems[0].text;
        })
      },
      // 选择学历
      openEducatePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.educateList);
        picker.show(function (selectItems) {
          _self.base.edu = selectItems[0].text;
        })
      },
      // 选择婚姻状况
      openMarrigePicker () {
        let _self = this;
        let picker = new mui.PopPicker();
        picker.setData(this.marriageList);
        picker.show(function (selectItems) {
          _self.base.marriage = selectItems[0].text;
        })
      },
      chooseIntelligent (val) {
        console.log(val);
        this.filterConShow = false;
        this.$emit('showLayer', false);
        this.getData();
      }
    },
  }
</script>

<style lang="scss" scoped>
  .filter-con {
    position: relative;
    padding: .8rem 4.5rem;
    border-top: 1px solid #eee;
    background: #fff;
    text-align: center;
    font-size: 1.2rem;
    z-index: 9;
  }
  .ic-filter {width: 1rem;}
  .filt-con-layer {
    position: absolute;
    padding: 0 1rem;
    left: 0;
    right: 0;
    z-index: 99;
    background: #fff;
    .mui-table-view:before {background-color: #fff;}
    .mui-table-view-cell {
      padding-left: 0;
      text-align: left;
      a {margin-left: 0;}
    }
  }
  .mh-form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 5rem;
    line-height: 5rem;
    padding: 1px 2rem;
    border-bottom: 1px solid #eee;
    color: #666;
    font-size: 1.4rem;
    overflow: hidden;
    &.item-lg {
      height: 6.5rem;
      line-height: 6.5rem;
    }
  }
  .con-val {
    right: 2.4rem;
    color: #333;
  }
  .btn-row {
    padding: 1rem;
    button {flex: 1;margin: 0 1rem;}
  }
  .con-control {
    a.active {color: #de73a4;}
  }
</style>
